
import router from '@/router';
<template>
    <div class="header-cont">
        <div class="left">
            <h1>
                <router-link to="/">{{t('sitename')}}</router-link>
            </h1>
        </div>
        <div class="right flex-center" >
            <div class="lang gap">
                <span class="item" @click="changeLanguage('zh-cn')">简体中文</span>
                /
                <span class="item" @click="changeLanguage('en')">EN</span>
            </div>
            <template v-if="isLogin">
            <div class="gap cursor">
                <router-link to="/personal/message">
                    <el-badge :is-dot ="!!unReadCount">
                    <el-icon>
                        <message />
                    </el-icon>
                </el-badge>
                </router-link>
            </div>
            <el-dropdown trigger="click" @command="handleCommand">
                <div class="flex-center cursor" >
                    {{username}}
                    <el-icon>
                        <caret-bottom />
                    </el-icon>
                </div>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item command="toPersonal">{{t('personalCenter')}}</el-dropdown-item>
                        <el-dropdown-item command="toLogout">{{ t('layout') }}</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
            </template>
            <template v-else-if="$route.name!=='login'">
                <router-link to="/login">登录</router-link>
            </template>
        </div>
    </div>
</template>
<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';

    const {locale,t} = useI18n()
    function changeLanguage(lang){
        locale.value = lang
        localStorage.setItem('locale',lang)
    }
    const isLogin = ref(false)
    const username = ref('admin')
    isLogin.value = true
    const unReadCount = ref(0)
    unReadCount.value = 3

    const router = useRouter()
    const commands  = {
        toPersonal:()=>{
            router.push('/personal')
        },
        toLogout:()=>{
            console.log("退出");
        },

    }
    const handleCommand = (command) =>{
            commands[command] && commands[command]
    }
</script>
<style scoped lang="scss">
    .header-cont{
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0px 20px;
        height: 100%;
        a{
            color: inherit;
            text-decoration: none;
        }
        h1{
            margin: 0;
            font-size: 20px;
        }
        .gap{
            margin-right: 20px;
        }
        .right{
            .lang{
                font-size: 14px;
                .item{
                    cursor: pointer;
                    &.active{
                        font-size: 18px;
                        font-weight: bold;
                    }
                }
            }
        }
        .el-dropdown{
            color:inherit;
        }
    }

</style>